<template>
  <div class="app" id="bu12">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="conres">
            <div class="ra">
              <h3>订单中心</h3>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="全部订单 " name="first" state>
                <div class="lineItem">
                  <div class="text">订单详情</div>
                  <div class="amount">(30条)</div>
                </div>
                <!-- 第一个 -->
                <div class="box">
                  <div class="conem">
                    <div class="list">
                      <div class="top flex_lr">
                        <div>订单号：915426218542320</div>
                        <div>订单确认时间：2019-11-23</div>
                      </div>
                      <div class="con_u">
                        <div class="toen1">
                          <div class="topeng">
                            <div class="img_qw">
                              <img src="@/assets/img/aa.png" alt />
                            </div>
                            <div class="w250">
                              <h4>阿迪达斯</h4>
                              <div class="xpsgf">新品首发</div>
                              <p>数量:1</p>
                              <p>颜色：黑色 尺码：中号</p>
                              <p>发货时间：三天内</p>
                            </div>
                          </div>
                          <div class="dianjia">
                            <img src="@/assets/img/收货橘.png" alt /> 阿迪达斯
                          </div>
                        </div>
                        <div class="toen2">
                          <h5>买家</h5>
                          <div>王大壮</div>
                        </div>
                        <div class="toen3">
                          <h5>收货地址</h5>
                          <p>王大壮</p>
                          <p>15623957281</p>
                          <p>湖北省武汉市光谷步行街尚都1-2819</p>
                        </div>
                        <div class="toen4">
                          <h5>订单状态</h5>
                          <div class="ww_ww" style="color:blue">买家已付款,等待商家发货</div>
                        </div>
                        <div class="toen5">
                          <h5 style="padding-bottom: 10px;">操作</h5>
                          <div class="fom">
                            <div @click="$router.push('/bussOrderdetails')">查看详情</div>
                            <div @click="fahuo">发货</div>
                            <div @click="dialogVisible = true">更改收货信息</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 第二个 -->
                <div class="box">
                  <div class="conem">
                    <div class="list">
                      <div class="top flex_lr">
                        <div>订单号：915426218542320</div>
                        <div>订单确认时间：2019-11-23</div>
                      </div>
                      <div class="con_u">
                        <div class="toen1">
                          <div class="topeng">
                            <div class="img_qw">
                              <img src="@/assets/img/aa.png" alt />
                            </div>
                            <div class="w250">
                              <h4>阿迪达斯</h4>
                              <div class="xpsgf">新品首发</div>
                              <p>数量:1</p>
                              <p>颜色：黑色 尺码：中号</p>
                              <p>发货时间：三天内</p>
                            </div>
                          </div>
                          <div class="dianjia">
                            <img src="@/assets/img/收货橘.png" alt /> 阿迪达斯
                          </div>
                        </div>
                        <div class="toen2">
                          <h5>买家</h5>
                          <div>王大壮</div>
                        </div>
                        <div class="toen3">
                          <h5>收货地址</h5>
                          <p>王大壮</p>
                          <p>15623957281</p>
                          <p>湖北省武汉市光谷步行街尚都1-2819</p>
                        </div>
                        <div class="toen4">
                          <h5>订单状态</h5>
                          <div class="ww_ww" style="color:blue">等待买家付款</div>
                        </div>
                        <div class="toen5">
                          <h5 style="padding-bottom: 10px;">操作</h5>
                          <div class="fom">
                            <div @click="$router.push('/bussOrderdetails')">查看详情</div>
                            <div @click="tixing()">付款提醒</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="box">
                  <div class="conem">
                    <div class="list">
                      <div class="top flex_lr">
                        <div>订单号：915426218542320</div>
                        <div>订单确认时间：2019-11-23</div>
                      </div>
                      <div class="con_u">
                        <div class="toen1">
                          <div class="topeng">
                            <div class="img_qw">
                              <img src="@/assets/img/aa.png" alt />
                            </div>
                            <div class="w250">
                              <h4>阿迪达斯</h4>
                              <div class="xpsgf">新品首发</div>
                              <p>数量:1</p>
                              <p>颜色：黑色 尺码：中号</p>
                              <p>发货时间：三天内</p>
                            </div>
                          </div>
                          <div class="dianjia">
                            <img src="@/assets/img/收货橘.png" alt /> 阿迪达斯
                          </div>
                        </div>
                        <div class="toen2">
                          <h5>买家</h5>
                          <div>王大壮</div>
                        </div>
                        <div class="toen3">
                          <h5>收货地址</h5>
                          <p>王大壮</p>
                          <p>15623957281</p>
                          <p>湖北省武汉市光谷步行街尚都1-2819</p>
                        </div>
                        <div class="toen4">
                          <h5>订单状态</h5>
                          <div class="ww_ww" style="color:blue">已发货,等待买家收货</div>
                        </div>
                        <div class="toen5">
                          <h5 style="padding-bottom: 10px;">操作</h5>
                          <div class="fom">
                            <div @click="$router.push('/bussOrderdetails')">查看详情</div>
                            <div @click="shouhuo()">收货提醒</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="box">
                  <div class="conem">
                    <div class="list">
                      <div class="top flex_lr">
                        <div>订单号：915426218542320</div>
                        <div>订单确认时间：2019-11-23</div>
                      </div>
                      <div class="con_u">
                        <div class="toen1">
                          <div class="topeng">
                            <div class="img_qw">
                              <img src="@/assets/img/aa.png" alt />
                            </div>
                            <div class="w250">
                              <h4>阿迪达斯</h4>
                              <div class="xpsgf">新品首发</div>
                              <p>数量:1</p>
                              <p>颜色：黑色 尺码：中号</p>
                              <p>发货时间：三天内</p>
                            </div>
                          </div>
                          <div class="dianjia">
                            <img src="@/assets/img/收货橘.png" alt /> 阿迪达斯
                          </div>
                        </div>
                        <div class="toen2">
                          <h5>买家</h5>
                          <div>王大壮</div>
                        </div>
                        <div class="toen3">
                          <h5>收货地址</h5>
                          <p>王大壮</p>
                          <p>15623957281</p>
                          <p>湖北省武汉市光谷步行街尚都1-2819</p>
                        </div>
                        <div class="toen4">
                          <h5>订单状态</h5>
                          <div class="ww_ww" style="color:blue">买家发起退货退款,等待商家处理</div>
                        </div>
                        <div class="toen5">
                          <h5 style="padding-bottom: 10px;">操作</h5>
                          <div class="fom">
                            <div>查看售后详情</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :hide-on-single-page="value"
                  :total="total"
                  :page-size="5"
                  :pager-count="15"
                  :current-page="currentPage"
                  prev-text="上一页"
                  next-text="下一页"
                  @current-change="currentChange"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="待付款" name="second" state="1">
                <div class="lineItem">
                  <div class="text">订单详情</div>
                  <div class="amount">(30条)</div>
                </div>
                <div class="box">
                  <div class="conem">
                    <div class="list">
                      <div class="top flex_lr">
                        <div>订单号：915426218542320</div>
                        <div>订单确认时间：2019-11-23</div>
                      </div>
                      <div class="con_u">
                        <div class="toen1">
                          <div class="topeng">
                            <div class="img_qw">
                              <img src="@/assets/img/aa.png" alt />
                            </div>
                            <div class="w250">
                              <h4>阿迪达斯</h4>
                              <div class="xpsgf">新品首发</div>
                              <p>数量:1</p>
                              <p>颜色：黑色 尺码：中号</p>
                              <p>发货时间：三天内</p>
                            </div>
                          </div>
                          <div class="dianjia">
                            <img src="@/assets/img/收货橘.png" alt /> 阿迪达斯
                          </div>
                        </div>
                        <div class="toen2">
                          <h5>买家</h5>
                          <div>王大壮</div>
                        </div>
                        <div class="toen3">
                          <h5>收货地址</h5>
                          <p>王大壮</p>
                          <p>15623957281</p>
                          <p>湖北省武汉市光谷步行街尚都1-2819</p>
                        </div>
                        <div class="toen4">
                          <h5>订单状态</h5>
                          <div class="ww_ww" style="color:blue">等待买家付款</div>
                        </div>
                        <div class="toen5">
                          <h5 style="padding-bottom: 10px;">操作</h5>
                          <div class="fom">
                            <div @click="$router.push('/details41')">查看详情</div>
                            <div @click="tixing()">付款提醒</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :hide-on-single-page="value"
                  :total="total"
                  :page-size="5"
                  :pager-count="15"
                  :current-page="currentPage"
                  prev-text="上一页"
                  next-text="下一页"
                  @current-change="currentChange"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="待发货" name="third" state="2">
                <div class="box">
                  <div class="conem">
                    <div class="list">
                      <div class="top flex_lr">
                        <div>订单号：915426218542320</div>
                        <div>订单确认时间：2019-11-23</div>
                      </div>
                      <div class="con_u">
                        <div class="toen1">
                          <div class="topeng">
                            <div class="img_qw">
                              <img src="@/assets/img/aa.png" alt />
                            </div>
                            <div class="w250">
                              <h4>阿迪达斯</h4>
                              <div class="xpsgf">新品首发</div>
                              <p>数量:1</p>
                              <p>颜色：黑色 尺码：中号</p>
                              <p>发货时间：三天内</p>
                            </div>
                          </div>
                          <div class="dianjia">
                            <img src="@/assets/img/收货橘.png" alt /> 阿迪达斯
                          </div>
                        </div>
                        <div class="toen2">
                          <h5>买家</h5>
                          <div>王大壮</div>
                        </div>
                        <div class="toen3">
                          <h5>收货地址</h5>
                          <p>王大壮</p>
                          <p>15623957281</p>
                          <p>湖北省武汉市光谷步行街尚都1-2819</p>
                        </div>
                        <div class="toen4">
                          <h5>订单状态</h5>
                          <div class="ww_ww" style="color:blue">买家已付款,等待商家发货</div>
                        </div>
                        <div class="toen5">
                          <h5 style="padding-bottom: 10px;">操作</h5>
                          <div class="fom">
                            <div @click="$router.push('/details41')">查看详情</div>
                            <div>发货</div>
                            <div>更改收货信息</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :hide-on-single-page="value"
                  :total="total"
                  :page-size="5"
                  :pager-count="15"
                  :current-page="currentPage"
                  prev-text="上一页"
                  next-text="下一页"
                  @current-change="currentChange"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label=" 待收货" name="fourth" state="3">
                <div class="box">
                  <div class="conem">
                    <div class="list">
                      <div class="top flex_lr">
                        <div>订单号：915426218542320</div>
                        <div>订单确认时间：2019-11-23</div>
                      </div>
                      <div class="con_u">
                        <div class="toen1">
                          <div class="topeng">
                            <div class="img_qw">
                              <img src="@/assets/img/aa.png" alt />
                            </div>
                            <div class="w250">
                              <h4>阿迪达斯</h4>
                              <div class="xpsgf">新品首发</div>
                              <p>数量:1</p>
                              <p>颜色：黑色 尺码：中号</p>
                              <p>发货时间：三天内</p>
                            </div>
                          </div>
                          <div class="dianjia">
                            <img src="@/assets/img/收货橘.png" alt /> 阿迪达斯
                          </div>
                        </div>
                        <div class="toen2">
                          <h5>买家</h5>
                          <div>王大壮</div>
                        </div>
                        <div class="toen3">
                          <h5>收货地址</h5>
                          <p>王大壮</p>
                          <p>15623957281</p>
                          <p>湖北省武汉市光谷步行街尚都1-2819</p>
                        </div>
                        <div class="toen4">
                          <h5>订单状态</h5>
                          <div class="ww_ww" style="color:blue">已发货,等待买家收货</div>
                        </div>
                        <div class="toen5">
                          <h5 style="padding-bottom: 10px;">操作</h5>
                          <div class="fom">
                            <div @click="$router.push('/details41')">查看详情</div>
                            <div @click="shouhuo()">收货提醒</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :hide-on-single-page="value"
                  :total="total"
                  :page-size="5"
                  :pager-count="15"
                  :current-page="currentPage"
                  prev-text="上一页"
                  next-text="下一页"
                  @current-change="currentChange"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="售后待处理" name="daipin" state="4">
                <div class="box">
                  <div class="conem">
                    <div class="list">
                      <div class="top flex_lr">
                        <div>订单号：915426218542320</div>
                        <div>订单确认时间：2019-11-23</div>
                      </div>
                      <div class="con_u">
                        <div class="toen1">
                          <div class="topeng">
                            <div class="img_qw">
                              <img src="@/assets/img/aa.png" alt />
                            </div>
                            <div class="w250">
                              <h4>阿迪达斯</h4>
                              <div class="xpsgf">新品首发</div>
                              <p>数量:1</p>
                              <p>颜色：黑色 尺码：中号</p>
                              <p>发货时间：三天内</p>
                            </div>
                          </div>
                          <div class="dianjia">
                            <img src="@/assets/img/收货橘.png" alt /> 阿迪达斯
                          </div>
                        </div>
                        <div class="toen2">
                          <h5>买家</h5>
                          <div>王大壮</div>
                        </div>
                        <div class="toen3">
                          <h5>收货地址</h5>
                          <p>王大壮</p>
                          <p>15623957281</p>
                          <p>湖北省武汉市光谷步行街尚都1-2819</p>
                        </div>
                        <div class="toen4">
                          <h5>订单状态</h5>
                          <div class="ww_ww" style="color:blue">买家发起退货退款,等待商家处理</div>
                        </div>
                        <div class="toen5">
                          <h5 style="padding-bottom: 10px;">操作</h5>
                          <div class="fom">
                            <div>查看售后详情</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :hide-on-single-page="value"
                  :total="total"
                  :page-size="5"
                  :pager-count="15"
                  :current-page="currentPage"
                  prev-text="上一页"
                  next-text="下一页"
                  @current-change="currentChange"
                ></el-pagination>
              </el-tab-pane>
            </el-tabs>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
      <div class="lheds">更改收货信息</div>
      <div class="lbody">
        <el-form label-width="80px">
          <el-form-item label="收件人">
            <el-input v-model="names"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="phones"></el-input>
          </el-form-item>
          <el-form-item label="收件地址">
            <el-row>
              <el-input v-model="provinces" style="width:100px"></el-input>
              <span>省</span>
              <el-input v-model="city" style="width:100px"></el-input>
              <span>市</span>
              <el-input v-model="area" style="width:100px"></el-input>
              <span>区</span>
            </el-row>
            <el-row style="margin-top:15px">
              <el-input v-model="address"></el-input>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
      <el-button
        style="margin: 0 auto;display: block;"
        type="primary"
        @click="gengai"
      >确定更改</el-button>
      <div style="height:15px"></div>
    </el-dialog>
    <Footer />
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessL from "@/components/businessL";
import businessF from "@/components/businessF";
export default {
  components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
  },
  data() {
    return {
      activeName: this.$route.query.ax,
      value: true, //只有一页时显示隐藏
      currentPage: 1, //当前页码
      pageSize: 4, //每页数据条数
      total: 15, //总条目数
      orderState: "1", //订单状态
      orderList: [],
      dialogVisible:false,
      names:"李大牛",
      phones:15072967720,
      provinces:"湖北",
      city:"武汉市",
      area:"洪山区",
      address:"光谷步行街23栋13号"
    };
  },
  mounted() {
    if (this.activeName == 0) {
      this.activeName = "first";
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(tab.$attrs.state);
    },
    currentChange(val) {
      console.log(val);
    },
    // 获取订单详情
    async ptGetOrderList() {
      //
    },
    shouhuo() {
      this.$message({
        message: "已收货",
        type: "success"
      });
    },
    tixing() {
      this.$message({
        message: "已提醒买家",
        type: "success"
      });
    },
    fahuo() {
      this.$message({
        message: "发货成功",
        type: "success"
      });
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
      .catch(_ => {});
    },
    gengai(){
      this.dialogVisible = false
      this.$message({
        message: "更改成功",
        type: "success"
      });
    }
  }
};
</script>
<style lang="stylus">
.app /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}
#bu12{


.conres /deep/ .el-tabs__nav {
  margin-left: 260px;
}

.conres /deep/ .el-tabs__item.is-active {
  color: #f06048;
}

.conres /deep/ .el-tabs__active-bar {
  color: #f06048;
}

.conres /deep/ .el-tabs__item:hover {
  color: #f06048;
}

.conres /deep/ .el-tabs__active-bar {
  background-color: #f06048;
}

.back {
  background-color: #f06048;
}

.flex_lr {
  display: flex;
  justify-content: space-between;
}

.pxes {
  height: 15px;
}

.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
  padding-bottom: 10px;
}

.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}

.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}

.conres .ra h3 {
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  border-bottom: 1px solid #cecece;
  margin-top: 15px;
  padding-bottom: 10px;
}

.conem {
  width: 890px;
  height: auto;
  margin: 0 auto;
}

.conem h5 {
  padding: 15px 0px;
}

.conem .list {
  width: 888px;
  height: 192px;
  border: 1px solid #dcdcdc;
  margin: 15px 0px;
}

.conem .list .top {
  height: 30px;
  border-bottom: 1px solid #dcdcdc;
  text-align: center;
  line-height: 30px;
}

.conem .list .top div:nth-child(1) {
  padding-left: 15px;
}

.conem .list .top div:nth-child(2) {
  padding-right: 15px;
  color: #a0a0a0;
}

.conem .list .con_u {
  height: 160px;
}

.conem .list .fom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.conem .list .fom div:hover {
  color: #fff;
  background-color: #f06048;
  cursor: pointer;
}

.conem .list .fom div {
  width: 95px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 13px;
  border: solid 1px #f06048;
  margin-right: 15px;
  margin-top: 5px;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #f06048;
}

.con_u {
  display: flex;
}

.con_u .toen1 {
  width: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.topeng .img_qw img {
  width: 120px;
  height: 120px;
}

.topeng {
  display: flex;
  justify-content: space-between;
  margin: 10px 8px 0px 16px;
}

.topeng .w250 {
  width: 220px;
  line-height: 27px;
}

.topeng .w250 h4 {
  font-size: 18px;
}

.topeng .w250 .xpsgf {
  width: 64px;
  height: 19px;
  background-color: #e44d5e;
  border-radius: 9px;
  color: #fff;
  line-height: 19px;
  text-align: center;
}

.con_u .dianjia {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #313131;
  padding-left: 28px;
}

.con_u .dianjia img {
  width: 22px;
  height: 20px;
  position: relative;
  top: 3px;
}

.con_u .toen2 {
  width: 106px;
  text-align: center;
}

.con_u .toen2 div:nth-child(2) {
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #313131;
}

.con_u .toen3 {
  width: 143px;
  text-align: center;
}

.con_u p {
  font-size: 12px;
}

.con_u .toen4 {
  width: 140px;
  text-align: center;
}

.con_u .toen5 {
  width: 127px;
  text-align: center;
}

.toen5 .baen {
  width: 80px;
  height: 20px;
  background-color: #f06048;
  color: #fff;
  text-align: center;
  line-height: 20px;
  margin-top: 15px;
  margin-left: 3px;
}

.ww_ww {
  color: #959595;
  font-size: 12px;
  margin-top: 10px;
}

/* 订单详情 */
.lineItem {
  width: 100%;
  height: 28px;
  background-color: #dedbde;
  display: flex;
  justify-content: flex-start;
  line-height: 28px;
  padding-left: 15px;
  box-sizing: border-box;
}

.lineItem .text {
  font-size: 15px;
  font-weight: 700;
}

.lineItem .amount {
  font-size: 10px;
  margin-left: 15px;
}
.el-dialog__header{
  padding: 0px !important;
}
.el-dialog__body{
  padding: 0px !important;
}
.lheds{
  width: 100%;
  height: 60px;
  background-color: rgb(240, 96, 72);
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
}
.lbody{
  width 80%
  margin:15px auto
}
}
</style>